<template>
  <div class="topoList">

    <div class="topo topoActive" @mouseover.stop="showType = false"
         v-show="showType && value != ''">
      <img src="./image/listRoom.png" style="width:16px" />
      <span>{{ name }}</span>
      <i class="icon iconfont icon-xiala"
         style="font-size:12px;color:#666;"></i>
    </div>

    <div @mouseleave.stop="showType = true" v-show="!showType || value == ''"
         class="list">
      <div class="search">
        <el-input placeholder="输入名称回车搜索" v-model="queryForm.query.name" :style="{flex:1}"
                  prefix-icon="el-icon-search" @change="searchName">
        </el-input>
         <span class="delspan" style="width:30px;font-size:10px;"  @click="searchName">重置</span>
      </div>
      <div :class="{ topo: true, topoActive: value == item.id }"
           v-for="item in list" :key="item.id">
        <div @click="changeTopo(item.id, item.name)" style="width:366px" class="selectspan">

          <img src="./image/listRoom.png" style="width:16px" />
          <span>{{ item.name || item.ciName }}</span>
        </div>
        <span class="delspan" @click.stop="deleCi(item)">删除</span>
      </div>
    </div>

  </div>
</template>

<script type="text/javascript">
/*
 * @author 宋辉辉
 * @description 视图列表组件
 * @api 后台接口地址
 * @since 2021-12-8 17:10
 * @update 2021-12-8 17:10
 * @modifier 修改人
 * @bug 无
 * @version v1.0.0
 */


import { deleteCI } from '@/api/assets/ci/room'


export default {
  props: {
    ciType:{
      type:String,
      value:''
    },
    list: {
      type: Array,
      default: () => {
        return [
          {
            id: 1,
            name: '北京机房'
          },
          {
            id: 2,
            name: '上海一期机房'
          },
          {
            id: 3,
            name: '上海二期机房'
          },
          {
            id: 4,
            name: '杭州机房'
          },
          {
            id: 5,
            name: '郑州机房'
          },
          {
            id: 6,
            name: '武汉机房'
          }
        ]
      }
    },

    value: {
      type: [String, Number],
      default: () => {
        return 1
      }
    }

  },
  data () {
    return {
      showType: false,
      queryForm: {
        query: {
          name: ''
        }
      },
      name: ''
    }
  },
  methods: {
    init(){
      this.data = this.$options.data()
      this.showType = false
      this.value = ''
    },

    searchName () {
      console.log(this.queryForm.query.name, '--------search--');
      this.$eventHub.$emit('ci-search-name', this.ciType, this.queryForm.query.name.trim())

      // this.$set(this.queryForm.query,'name','');
      this.$nextTick(() => {
        this.queryForm.query.name = ''
      })
    },

    deleCi (item) {
      console.log(item);

      this.$confirm('此操作将删除该视图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {

          let ret = await deleteCI(item.id)
          console.log(ret, '--------删除 视图---');
          if (ret.code == 20000) {

            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 通知页面，刷新
            this.$emit('itemdelete')
            this.init()
            this.showType = false
            this.name = ''
            this.value = ''
          }

        })
        .catch(() => {

          this.$message({
            type: 'info',
            message: '已取消删除'
          })

        })

    },

    changeTopo (id, name) {
      console.log(id, name, '---------------changeTopo-------');
      this.showType = true
      this.name = name
      // this.$emit('input', id)
      this.$emit('changeTopo', id)


    }
  }
}
</script>

<style scoped lang="scss">
.topoList {
  width: 200px;
  position: absolute;
  top: 61px;
  left: 0px;
  z-index: 2;
  .list {
    background: #fff;
    height: calc(100vh - 121px);
    overflow-y: auto;
    .search {
      padding: 10px 16px;
      display: flex;
      align-items: center;
    }
    .selectspan{
      cursor: pointer;
    }
    .selectspan:hover span{
      color: red;
    }
    .delspan {
      cursor: pointer;
    }
    .delspan:hover {
      color: red;
    }
  }

  .topo {
    padding-left: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    background: #fff;
    cursor: pointer;
    transition-property: height;
    transition-duration: 0.5s;
    span {
      color: #333;
      font-size: 12px;
      padding-left: 5px;
      width: 130px;
    }
  }
  .topoActive {
    background: #e6f6fb;
    cursor: initial;
    span {
      color: #00a1d8;
    }
  }
  @keyframes hideOrShow {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}
</style>
